<!--点餐列表的公共样式-->
<!--这里面使用的是Tailwind+vant插件用之前要先导入和配置-->
<template>
  <page-view class="flex flex-col">
    <title-bar>饿了就上饿了么</title-bar>
    <div class="flex-1 overflow-auto">
      <Skeleton :row="8" :loading="isFirstLoading">
        <List v-model:loading="isLoading" :finished="finished" finished-text="没有更多了" @load="loadNextPage"
          loading-text="正在加载下一页">
          <Swipe class="h-[200px]" :autoplay="2000">
            <SwipeItem v-for="item in swiperImage" :key="item">
              <img :src="baseURL + item" class="w-full h-full object-cover" alt="">
            </SwipeItem>
          </Swipe>
          <transition-group enter-active-class="animate__animated animate__slideInUp">
            <food-item v-for="item in listData" :key="item.id" :item-data="item"></food-item>
          </transition-group>
        </List>
      </Skeleton>
    </div>
  </page-view>
</template>

<script>
//导入vant的包
import { Swipe, SwipeItem, List, Skeleton } from 'vant';
import FoodItem from "@/components/FoodItem";
import API from "@/utils/API";


export default {
  name: "ChooseFood",
  inject: ["baseURL"],
  data() {
    return {
      pageIndex: 1,
      listData: [],
      pageCount: 0,
      swiperImage: [],
      isLoading: false,
      isFirstLoading: true
    };
  },
  created() {
    this.getListByPage();
  },
  methods: {
    async getListByPage(pageIndex = 1) {
      this.isLoading = true;
      try {
        let result = await API.foodInfo.getListByPage({ pageIndex });
        console.log(result)
        this.pageIndex = result.pageIndex;
        this.listData.push(...result.listData);
        this.pageCount = result.pageCount;
        if (pageIndex == 1) {
          this.swiperImage = result.listData.slice(0, 4).map(item => {
            return item.food_img;
          })
        }
        this.isFirstLoading = false;
      } catch (error) {
        console.log(error)
      } finally {
        this.isLoading = false;
      }
    },
    loadNextPage() {
      this.pageIndex++;
      this.getListByPage(this.pageIndex);
    },
  },
  computed: {
    finished() {
      return this.pageIndex >= this.pageCount;
    },
  },
  components: {
    Swipe,
    SwipeItem,
    FoodItem,
    List,
    Skeleton
  }
}
</script>

<style scoped lang="scss">

</style>